<template>
  <div class="con">
    <div class="contbox6_10">
      <p class="titlelist6_10">
        APP管理&nbsp;&nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp;&nbsp;配置
      </p>
      <div class="content">
        <div style="margin-left: 20px">
          <div class="header">
            <div class="list">
              <div class="listTitle">菜单名称：</div>
              <el-input
                v-model="listData.menuName"
                disabled
                placeholder="请输入内容"
              ></el-input>
            </div>
            <div class="list">
              <div class="listTitle">业务标识：</div>
              <el-input
                v-model="listData.str"
                disabled
                placeholder="请输入内容"
              ></el-input>
            </div>
            <div class="list">
              <div class="listTitle">信用卡业务：</div>
              <el-input
                v-model="listData.busName"
                disabled
                placeholder="请输入内容"
              ></el-input>
            </div>
          </div>

          <div>
            <el-button
              type="primary"
              style="margin-left: 40px; margin-top: 30px"
              class="butt"
              @click="addUrl"
              size="mini"
              icon="el-icon-plus"
              >添加推广链接</el-button
            >
            <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
              stripe
              border
              :row-style="{ height: '0px' }"
              :cell-style="{ padding: '0px' }"
              style="margin-top: 20px"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                prop="typeName"
                show-overflow-tooltip
                label="推广名称"
                min-width="200"
              ></el-table-column>
              <el-table-column
                prop="channelName"
                show-overflow-tooltip
                label="业务品牌"
                min-width="200"
              ></el-table-column>
              <el-table-column
                prop="shareFlag"
                show-overflow-tooltip
                label="是否支持分享"
                min-width="200"
              >
                <template slot-scope="scope">
                  <div>
                    <span v-if="scope.row.shareFlag == 0">否</span>
                    <span v-if="scope.row.shareFlag == 1">是</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="brandChannelName"
                show-overflow-tooltip
                label="状态"
                min-width="200"
              >
                <template slot-scope="scope">
                  <div>
                    <el-switch
                      v-model="scope.row.upStatus"
                      active-color="#13ce66"
                      active-value="0"
                      inactive-value="1"
                      @change="swChange(scope.row)"
                      inactive-color="#cccccc"
                    >
                    </el-switch>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                min-width="190"
                label="操作"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="mini"
                    v-if="jurisdiction != 2"
                    @click="setData(scope.row)"
                    >修改</el-button
                  >
                  <el-button type="text" size="mini" @click="up(scope.row)"
                    >上移</el-button
                  >
                  <el-button type="text" size="mini" @click="down(scope.row)"
                    >下移</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!-- 添加推广链接弹框 -->
        <el-dialog
          title="推广链接"
          :visible.sync="dialogVisible"
          width="500px"
          :before-close="handleClose"
        >
          <div>
            <el-form
              :label-position="labelPosition"
              label-width="120px"
              :model="formLabelAlign"
              class="restStyle"
            >
              <el-form-item label="业务品牌">
                <el-select
                  v-model="form.channelUid"
                  @change="pinCh"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in pinOptions"
                    :key="item.uid"
                    :label="item.channelName"
                    :value="item.uid"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="推广名称">
                <el-select v-model="form.typeCode" placeholder="请选择">
                  <el-option
                    v-for="item in urlListOptions"
                    :key="item.typeCode"
                    :label="item.typeName"
                    :value="item.typeCode"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="是否支持分享">
                <el-select v-model="form.shareFlag" placeholder="请选择">
                  <el-option label="支持" value="1"></el-option>
                  <el-option label="不支持" value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="图标">
                <div>
                  <el-upload
                    :action="httpurl + '/api/fileUpload'"
                    list-type="picture-card"
                    :limit="1"
                    ref="uploadImg"
                    :on-preview="handlePictureCardPreviews"
                    :on-remove="handleRemoves"
                    :before-upload="beforeAvatarUploads"
                    :on-success="successs"
                    :on-change="picChanges"
                    :file-list="imgList1"
                    :class="{ hides: hideUploadEdits }"
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible1s" append-to-body>
                    <img width="100%" :src="dialogImageUrls" alt="" />
                  </el-dialog>
                </div>
              </el-form-item>
              <el-form-item label="推广图">
                <div>
                  <el-upload
                    :class="{ hide: hideUploadEdit }"
                    :action="httpurl + '/api/fileUpload'"
                    list-type="picture-card"
                    :limit="1"
                    ref="uploadImg1"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                    :on-change="picChange"
                    :before-upload="beforeAvatarUpload"
                    :file-list="imgList2"
                    :on-success="success"
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog
                    :visible.sync="dialogVisible1"
                    :before-close="handleClose1"
                    append-to-body
                  >
                    <img width="100%" :src="dialogImageUrl" alt="" />
                  </el-dialog>
                </div>
              </el-form-item>
            </el-form>
            <div style="clear: both"></div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
          </span>
        </el-dialog>
        <el-button style="margin-left:40px" @click="back">返回</el-button>
      </div>
      
    </div>
    
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      // 判断添加还是修改
      status: "create",
      // 从列表带过来的数据
      listData: "",
      //控制图片弹框
      dialogVisible1: false,
      // 上传图片地址
      httpurl: this.GLOBAL.httpurl,
      //   推荐图片
      dialogImageUrl: "",
      dialogVisible: false,
      //   弹框里面的填写
      formLabelAlign: [],
      tableData: [],
      // 控制推广图是否显示
      hideUploadEdit: false,
      // 控制图标是否展示
      hideUploadEdits: false,
      // 获取下拉id
      busUid: "",
      pinOptions: [],
      // 链接下拉菜单
      urlListOptions: "",
      // 传递的数据
      form: {
        // 前一个列表的uid
        parentUid: this.$route.query.uid,
        // 品牌id
        channelUid: "",
        // 链接
        typeCode: "",
        // 是否支持分享
        shareFlag: "",
        // 图标
        iconList: [{ url: "" }],
        // 推广图
        pushImgList: [{ url: "" }],
      },
    };
  },
  created() {
    this.listData = this.$route.query;
    this.getListData();
    this.listData.busFlag == 0
      ? (this.listData.str = "业务类")
      : (this.listData.str = "非业务类");
  },
  methods: {
    // 返回
    back(){
      this.$router.push({
        name:"administration"
      })
    },
    // 上移
    up(val) {
      axios
        .post("api/sys/cltMenu/changeSubMenuSort", {
          uid: val.uid,
          sortType: 0,
        })
        .then((res) => {
          console.log(res);
          if (res.data.code != "0000") {
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 1, //1秒后自动关闭
            });
          }
          this.getListData();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 下移
    down(val) {
      axios
        .post("api/sys/cltMenu/changeSubMenuSort", {
          uid: val.uid,
          sortType: 1,
        })
        .then((res) => {
          console.log(res);
          if (res.data.code != "0000") {
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 1, //1秒后自动关闭
            });
          }
          this.getListData();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 确定接口
    submit() {
      console.log(this.form);
      if (
        this.form.channelUid != "" &&
        this.form.typeCode != "" &&
        this.form.shareFlag != "" &&
        this.form.iconList[0].url != "" &&
        this.form.pushImgList[0].url != ""
      ) {
        axios
          .post("api/sys/cltMenu/saveSubMenuLink", this.form)
          .then((res) => {
            console.log(res);
            if (res.data.code == "0000") {
              layer.open({
                content: res.data.msg,
                skin: "msg",
                time: 1, //1秒后自动关闭
              });
              this.dialogVisible = false;
              this.getListData();
            } else {
              layer.open({
                content: res.data.msg,
                skin: "msg",
                time: 1, //1秒后自动关闭
              });
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        layer.open({
          content: "数据全为必填",
          skin: "msg",
          time: 1, //1秒后自动关闭
        });
      }
    },
    // 列表框接口
    getListData() {
      axios
        .post("/api/sys/cltMenu/promotionLinkList", { uid: this.listData.uid })
        .then((res) => {
          console.log("列表");
          console.log(res);
          this.tableData = res.data.data;
          this.busUid = res.data.busUid;
          this.selectPin();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    pinCh() {
      this.urlList();
    },
    // 下拉框 业务品牌
    selectPin() {
      axios
        .post("api/business/getBusChannel", { busUid: this.busUid })
        .then((res) => {
          console.log("品牌下拉");
          console.log(res);
          this.pinOptions = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 下拉框 推广名称
    urlList() {
      axios
        .post("api/business/getBrandChannelType", {
          channelUid: this.form.channelUid,
        })
        .then((res) => {
          console.log(res);
          this.urlListOptions = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 修改
    setData(val) {
      this.form.uid = val.uid;
      // 回显数据
      axios
        .post("api/sys/cltMenu/getSubMenuLink", { uid: val.uid })
        .then((res) => {
          console.log("成功");
          console.log(res);
          this.form = res.data.data;
          this.imgList1 = res.data.data.iconList;
          this.imgList2 = res.data.data.pushImgList;
          this.hideUploadEdits = res.data.data.iconList.length >= 1;
          this.hideUploadEdit = res.data.data.pushImgList.length >= 1;
          this.urlList();
        })
        .catch((err) => {
          console.log(errr);
        });

      this.dialogVisible = true;
    },
    // 上传图片成功
    success(response, file, fileList) {
      this.form.pushImgList[0].url = response.data.filePath;
    },
    //   图片发生变化
    picChange(file, fileList) {
      this.hideUploadEdit = fileList.length >= 1;
    },
    picChanges(file, fileList) {
      this.hideUploadEdits = fileList.length >= 1;
    },
    // 开关
    swChange(val) {
      console.log(val);
      axios
        .post("api/sys/cltMenu/changeSubMenuStatus", { uid: val.uid })
        .then((res) => {
          console.log(res);
          this.getListData();
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 添加推广按钮点击弹框
    addUrl() {
      if (this.form.iconList[0].url != "") {
        this.$refs.uploadImg.clearFiles();
      }
      if (this.form.pushImgList[0].url != "") {
        this.$refs.uploadImg1.clearFiles();
      }
      this.hideUploadEdit = false;
      this.hideUploadEdits = false;
      this.form = {
        // 前一个列表的uid
        parentUid: this.$route.query.uid,
        // 品牌id
        channelUid: "",
        // 链接
        typeCode: "",
        // 是否支持分享
        shareFlag: "",
        // 图标
        iconList: [{ url: "" }],
        // 推广图
        pushImgList: [{ url: "" }],
      };

      this.dialogVisible = true;
    },
    // ===========================
    handleRemove(file, fileList) {
      this.hideUploadEdit = fileList.length >= 1;
      this.form.pushImgList[0].url = "";
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible1 = true;
    },
    beforeAvatarUpload(file) {
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/jpg";
      if (!isJPG) {
        this.$message.error("只能上传图片");
      }
      return isJPG;
    },
    handleClose1() {
      this.dialogVisible1 = false;
    },
    // ===========================
    handleRemoves(file, fileList) {
      this.hideUploadEdits = fileList.length >= 1;
      this.form.iconList[0].url = "";
      console.log(file, fileList);
    },
    handlePictureCardPreviews(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible1 = true;
    },
    beforeAvatarUploads(file) {
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/jpg";
      if (!isJPG) {
        this.$message.error("只能上传图片");
      }
      return isJPG;
    },
    // 上传成功  图标
    successs(response, file, fileList) {
      console.log(response);
      this.form.iconList[0].url = response.data.filePath;
    },
    // handleClose1s() {
    //   this.dialogVisible1 = false;
    // },
    // =================
  },
};
</script>

<style scoped>
.list {
  display: flex;
  align-items: center;
  margin-right: 50px;
}
.header {
  display: flex;
  margin-top: 30px;
}
/deep/ .el-upload-list__item {
  transition: none !important;
}
</style>

<style>
.hide .el-upload--picture-card {
  display: none;
}
</style>
<style>
.hides .el-upload--picture-card {
  display: none;
}
</style>


<style>
.restStyle .el-input {
  width: 250px;
}
.restStyle .el-input .el-input__inner {
  width: 100%;
}
.restStyle .el-upload--picture-card {
  width: 250px;
}
.restStyle .el-upload-list__item-actions {
  width: 250px;
}
.restStyle .el-upload-list__item {
  width: 250px;
}
</style>